<template>
    <div class = "option-data">
      <div> △ </div>
      <div id = "data">
        <span :class = "index === 0? 'selected':''"> {{day}} </span>
        <span> / </span>
        <span :class = "index === 1? 'selected':''"> {{month}} </span>
        <span> / </span>
        <span :class = "index === 2? 'selected':''"> {{year}} </span>
      </div>
      <div> ▽ </div>
    </div>
</template>

<script>
  function checkDay (array) {
    let day = array[0]
    day = parseInt(day)
    let month = array[1]
    month = parseInt(month)
    let year = array[2]
    year = parseInt(year)

    if (month === 2) {
      if ((year % 4 === 0 && year % 100 !== 0) ||
        (year % 100 === 0 && year % 400 === 0)) {
        if (day > 29) {
          day = 29
        }
      } else {
        if (day > 28) {
          day = 28
        }
      }
    } else if (month === 4 || month === 6 || month === 9 || month === 11) {
      if (day > 30) {
        day = 30
      }
    } else {
      if (day > 31) {
        day = 31
      }
    }

    if (day < 10) {
      day = '0' + day.toString()
    }
    if (month < 10) {
      month = '0' + month.toString()
    }
    array[0] = day
    array[1] = month
    array[2] = year
  }

  export default {
    data () {
      return {
        index: 0
      }
    },
    props: {
      optionObj: {
        type: Object,
        require: true
      },
      optionVal: {
        type: String,
        twoWay: true,
        require: true
      },
      isShowOption: {
        type: Boolean,
        twoWay: true,
        require: true
      }
    },
    computed: {
      day: function () {
        let arr = this.optionVal.split('/')
        return arr[0]
      },
      month: function () {
        let arr = this.optionVal.split('/')
        return arr[1]
      },
      year: function () {
        let arr = this.optionVal.split('/')
        return arr[2]
      }
    },
    ready () {
      this.incVal = function () {
        let arr = this.optionVal.split('/')

        let tmp = arr[this.index]
        tmp = parseInt(tmp)
        tmp++

        if (this.index === 1) {
          if (tmp > 12) {
            tmp = 12
          }
        } else if (this.index === 2) {
          let _maxYear = this.optionObj.date[1]
          if (tmp > _maxYear) {
            tmp = _maxYear
          }
        }
        arr[this.index] = tmp
        checkDay(arr)
        this.optionVal = arr.join('/')
      }

      this.decVal = function () {
        let arr = this.optionVal.split('/')
        let tmp = arr[this.index]
        tmp = parseInt(tmp)
        tmp--
        if (tmp < 1) {
          tmp = 1
        }
        if (this.index === 2) {
          let _minYear = this.optionObj.date[0]
          if (tmp < _minYear) {
            tmp = _minYear
          }
        }
        arr[this.index] = tmp
        checkDay(arr)
        this.optionVal = arr.join('/')
      }

      this.forward = function () {
        this.index++
        if (this.index > 2) {
          this.isShowOption = false
          this.index = 0
        }
      }

      this.back = function () {
        this.index--
        if (this.index < 0) {
          this.index = 0
        }
      }
    }
  }
</script>

<style lang = "less">
  .selected {
    background-color: black;
    color: white;
  }

  .option-data {
    border: 1px solid grey;
    width: 150px;
    position: relative;
    left: 90px;
  }

  #data {
    font-size: 15px;
  }
</style>

